<template>
  <div class="GykjMap-typhoonLayer">
    <!-- 台风路径标题列表 -->
    <div
      v-show="isShowTyphoonTitle"
      class="GykjMap-typhoonTitles"
      :class="typhoonTitleClass">
      <ul class="GykjMap-typhoon-titleList">
        <li
          v-for="(item, index) in typhoonTitles"
          v-show="typhoonTitles.length"
          :key="index">
          {{item.tfbh}} - {{item.name}}（风力{{item.points[0].power}}级）
        </li>
      </ul>
      <div class="GykjMap-typhoon-titleNoTyphoon" v-show="!typhoonTitles.length">暂无台风</div>
    </div>

    <!--台风路径信息关闭时，显示的图例图标-->
    <div
      v-show="isShowTyphoonTitle && isShowTyphoonClose"
      class="GykjMap-typhoon-closIng"
      :class="typhoonControlClass"
      @click="controlTyphoonInfo(true)">
      <div class="iconfont icon-left2-copy"></div>
    </div>

    <!-- 台风路径 信息 -->
    <div
      class="GykjMap-typhoon-info"
      :class="[
        typhoonInfoClass,
        isShowTyphoonContent ? 'GykjMap-typhoon-info-show' : ''
      ]">
      <div class="GykjMap-typhoon-history">
        <div class="GykjMap-typhoon-history-header">
          台风列表
          <div class="GykjMap-typhoon-close" @click="controlTyphoonInfo(false)">
            <span class="iconfont icon-left2-copy"></span>
          </div>
        </div>
        <div class="GykjMap-typhoon-history-table">
          <ScrollTable
            stripe
            stripeColor="rgba(26, 54, 126, 0.4)"
            maxHeight="210"
            thColor="white"
            tbColor="white"
            thBgColor="rgba(26, 54, 126, 0.8)"
            tbBgColor="rgba(26, 54, 126, 0)"
            :loading="showTyphoonLoading"
            :columns="typhoonHistoryTh"
            :data="typhoonHistoryTb" />

          <div
            v-show="isShowListBlock"
            class="GykjMap-typhoon-history-tableBlock">
          </div>
        </div>
      </div>

      <div class="GykjMap-typhoon-legend-ring">
        <div class="GykjMap-typhoon-legend-header">风圈图例</div>
        <div class="GykjMap-typhoon-legend-list">
          <div class="GykjMap-typhoon-legend-detail">
            <div class="GykjMap-typhoon-legend-circle-7"></div>
            <div>7级风圈</div>
          </div>
          <div class="GykjMap-typhoon-legend-detail">
            <div class="GykjMap-typhoon-legend-circle-10"></div>
            <div>10级风圈</div>
          </div>
          <div class="GykjMap-typhoon-legend-detail">
            <div class="GykjMap-typhoon-legend-circle-12"></div>
            <div>12级风圈</div>
          </div>
        </div>
      </div>

      <div class="GykjMap-typhoon-legend-center">
        <div class="GykjMap-typhoon-legend-header">台风等级图例</div>
        <div class="GykjMap-typhoon-legend-list">
          <div
            v-for="(item, index) in typhoonStrongLegend"
            class="GykjMap-typhoon-legend-detail"
            :class="`GykjMap-typhoon-legend-detail-${item.enName}`"
            :key="index">
            <img :src="require(`./img/${item.img}.png`)" />
            <div>{{item.cnName}}</div>
            <div>({{item.enName}})</div>
          </div>
        </div>
      </div>

      <div class="GykjMap-typhoon-legend-prediction">
        <div class="GykjMap-typhoon-legend-header">预测台图例</div>
        <div class="GykjMap-typhoon-legend-list">
          <div
            v-for="(item, index) in typhoonForecastLegend"
            class="GykjMap-typhoon-legend-detail"
            :class="`GykjMap-typhoon-legend-detail-${item.enName}`"
            :key="index">
            <div class="GykjMap-typhoon-legend-forecast">
              <div
                v-for="indexs in 3"
                :key="indexs"
                :style="{'background-color': item.color}"></div>
            </div>
            <div>{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as Maps from '../../map'
import * as Commons from '../../common'
import * as Utils from '../../util'
import * as Modules from '../../module'
import * as Tables from '../../table'

import ScrollTable from '../../public/scroll-table/scroll-table'

const { ERR_OK } = Utils

export default {
  props: {
    Map: {},
    layers: {}
  },
  components: {
    ScrollTable
  },
  data () {
    return {
      typhoonTitleClass: '',
      typhoonControlClass: '',
      typhoonInfoClass: '',
      isShowTyphoonTitle: false,
      isShowTyphoonClose: false,
      isShowTyphoonContent: false,
      typhoonTitles: [],
      isShowListBlock: false,
      showTyphoonLoading: false,
      typhoonHistoryTh: Tables.typhoonHistoryTh(this),
      typhoonHistoryTb: [],
      typhoonStrongLegend: Modules.typhoonStrongLegend,
      typhoonForecastLegend: Modules.typhoonForecastLegend
    }
  },
  methods: {
    controlTyphoonInfo (bol) {
      this.isShowTyphoonContent = bol

      if (bol === false) {
        setTimeout(() => {
          this.isShowTyphoonClose = true
        }, 300)
      } else {
        this.isShowTyphoonClose = false
      }
    },
    choseTyphoon (bol, params) {
      const item = params.row
      const index = params.index

      if (bol) {
        this.loading = true
        this.typhoonHistoryTb[index].is_current = 1

        Maps.getTyphoonSingelInfo(item.tfbh).then(res => {
          if (res.code === ERR_OK && res.result.length) {
            this.isShowListBlock = true

            Utils.createAnimate({
              Map: this.Map,
              zoom: 5,
              center: [+res.result[0].points[res.result[0].points.length - 1]['longitude'] + 1, +res.result[0].points[res.result[0].points.length - 1]['latitude']]
            }, () => {
              const layers = Maps.createTyphoon(res.result[0])

              this.addTyphoonLayer({ layers })

              this.typhoonTitles.push(res.result[0])
            })
          }
          this.loading = false
        })
      } else {
        this.typhoonHistoryTb[index].is_current = 0
        this.Map.removeLayer(this.layers['typhoonList'][item.tfbh]['layer'])
        this.Map.removeOverlay(this.layers['typhoonList'][item.tfbh]['typhoon']['typhoonStrong'])

        delete this.layers['typhoonList'][item.tfbh]

        this.hideTyphoonInfoLayer()
        const titleIndex = this.typhoonTitles.findIndex(items => items.tfbh === item.tfbh)
        this.typhoonTitles.splice(titleIndex, 1)
      }
    },
    showTyphoonInfoLayer (featureType, featureInfo) {
      if (this.layers['typhoonContent'] !== undefined) {
        this.hideTyphoonInfoLayer()
      }

      this.layers['typhoonContent'] = Maps.createTyphoonContent(Commons._filterTyphoonBaseInfo(featureType, featureInfo))
      this.Map.addOverlay(this.layers['typhoonContent'])

      let el = Commons._getClassEls('GykjMap-typhoonInfo-close')[0]

      el.onclick = (e) => {
        this.hideTyphoonInfoLayer()
      }
    },
    hideTyphoonInfoLayer () {
      this.Map.removeOverlay(this.layers['typhoonContent'])
      this.layers['typhoonContent'] = undefined
    },
    addTyphoonLayer (res) {
      let intervalIndex = 0
      const layerCount = Object.getOwnPropertyNames(res['layers']).length
      const layerName = 'typhoonList'

      if (this.layers[layerName] === undefined) {
        this.$set(this.layers, layerName, {})
      }

      for (let key in res['layers']) {
        const keyName = key

        this.layers[layerName][keyName] = res.layers[key]

        this.Map.addLayer(this.layers[layerName][keyName]['layer'])

        this.layers[layerName][keyName]['intervalIndex'] = 0

        this.layers[layerName][keyName]['interval'] = setInterval(() => {
          if (!this.layers[layerName][keyName]) {
            return
          }

          if (this.layers[layerName][keyName]['intervalIndex'] === this.layers[layerName][keyName]['typhoon']['typhoonIng'].length) {
            intervalIndex += 1
            if (intervalIndex === layerCount) {
              this.isShowListBlock = false
            }
            clearInterval(this.layers[layerName][keyName]['interval'])

            const dashFeature = this.layers[layerName][keyName]['typhoon']['typhoonWill']

            if (dashFeature.length) {
              this.layers[layerName][keyName]['layer'].getSource().addFeatures(dashFeature)
            }

            this.Map.addOverlay(this.layers[layerName][keyName]['typhoon']['typhoonStrong'])

            const featureInfo = this.layers[layerName][keyName]['typhoon']['typhoonIng'][this.layers[layerName][keyName]['intervalIndex'] - 1]['point'].get('info')
            this.showTyphoonInfoLayer('point', featureInfo)
            return
          }
          if (
            this.layers[layerName][keyName]['intervalIndex'] - 1 >= 0 &&
            this.layers[layerName][keyName]['intervalIndex'] !== this.layers[layerName][keyName]['typhoon'].length
          ) {
            this.layers[layerName][keyName]['typhoon']['typhoonIng'][this.layers[layerName][keyName]['intervalIndex'] - 1]['rings'].map(item => {
              this.layers[layerName][keyName]['layer'].getSource().removeFeature(item)
            })
          }

          const ringsFeature = this.layers[layerName][keyName]['typhoon']['typhoonIng'][this.layers[layerName][keyName]['intervalIndex']]['rings']
          const pointFeature = this.layers[layerName][keyName]['typhoon']['typhoonIng'][this.layers[layerName][keyName]['intervalIndex']]['point']
          const solidLineFeature = this.layers[layerName][keyName]['typhoon']['typhoonIng'][this.layers[layerName][keyName]['intervalIndex']]['solidLine']

          const features = [
            ...ringsFeature,
            pointFeature
          ]

          if (solidLineFeature) {
            features.push(solidLineFeature)
          }
          this.layers[layerName][keyName]['layer'].getSource().addFeatures(features)

          this.layers[layerName][keyName]['intervalIndex']++
        }, 100)
      }
    },
    initData (res, layerOptions) {
      if (Object.getOwnPropertyNames(res['layers']).length > 0) {
        this.isShowListBlock = true
      }

      const { typhoonTitleClass, typhoonControlClass, typhoonInfoClass } = layerOptions

      if (typhoonTitleClass) {
        this.typhoonTitleClass = typhoonTitleClass
      }

      if (typhoonControlClass) {
        this.typhoonControlClass = typhoonControlClass
      }

      if (typhoonInfoClass) {
        this.typhoonInfoClass = typhoonInfoClass
      }

      this.addTyphoonLayer(res)

      Utils.createAnimate({
        Map: this.Map,
        ...res.animateData
      }, () => {
        this.isShowTyphoonTitle = true
        this.isShowTyphoonContent = true

        console.log(res)

        if (res.isHaveTyphoon) {
          this.typhoonTitles = res.result
        }
      })
    },
    removeData () {
      this.hideTyphoonInfoLayer()

      this.isShowTyphoonTitle = false
      this.isShowTyphoonContent = false
      this.isShowListBlock = false
      this.typhoonTitles = []
      this.typhoonHistoryTb = []
    },
    getList () {
      this.getTyphoonList()
    },
    getTyphoonList () {
      this.showTyphoonLoading = true

      Maps.getTyphoonList()
        .then(res => {
          if (res.code === ERR_OK && res.result.length) {
            this.typhoonHistoryTb = res.result
          }
          this.showTyphoonLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
  .GykjMap-typhoonLayer {
    .GykjMap-typhoonTitles {
      width: 300px;
      position: absolute;
      left: 0;
      right: 0;
      top: 40px;
      margin: 0 auto;
      text-align: center;
      color: red;
      font-weight: 700;
      font-size: 22px;
      .GykjMap-typhoon-titleList {
        width: 100%;
        > li {
          font-weight: 700;
        }
      }
    }
    .GykjMap-typhoon-closIng {
      width: 40px;
      height: 40px;
      position: absolute;
      right: 10px;
      top: 90px;
      text-align: center;
      line-height: 40px;
      background-color: rgba(26, 54, 126, 0.6);
      color: white;
      font-size: 12px;
      border-radius: 5px;
      cursor: pointer;
    }
    .GykjMap-typhoon-info {
      width: 335px;
      position: absolute;
      transition: all .4s;
      right: -335px;
      top: 90px;
      z-index: 10;
      background-color: rgba(26, 54, 126, 0.6);
      border-radius: 5px;
      overflow: hidden;
      &.GykjMap-typhoon-info-show {
        right: 0;
      }
      .GykjMap-typhoon-history {
        width: 100%;
        height: 250px;
        overflow: hidden;
        .GykjMap-typhoon-history-header {
          height: 30px;
          line-height: 36px;
          color: white;
          text-align: center;
          position: relative;
          .GykjMap-typhoon-close {
            cursor: pointer;
            position: absolute;
            right: 12px;
            top: -1px;
            transform: rotate(180deg) scale(0.6);
            &:hover {
              color: #999;
            }
          }
        }
        .GykjMap-typhoon-history-table {
          margin-top: 5px;
          position: relative;
          width: 100%;
          height: 220px;
          overflow: hidden;
          user-select: none;
          .ivu-checkbox-wrapper {
            margin-right: 0;
          }
          .GykjMap-typhoon-history-tableBlock {
            z-index: 999;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            overflow: hidden;
          }
        }
      }
      .GykjMap-typhoon-legend-ring {
        width: 100%;
        overflow: hidden;
        margin-top: 5px;
        color: white;
        .GykjMap-typhoon-legend-header {
          height: 30px;
          line-height: 30px;
          text-align: center;
        }
        .GykjMap-typhoon-legend-list {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;
          background-color: rgba(26, 54, 126, 0.8);
          .GykjMap-typhoon-legend-detail {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            > div:nth-of-type(1) {
              width: 14px;
              height: 14px;
              border-radius: 7px;
            }
            .GykjMap-typhoon-legend-circle-7 {
              border: 1px solid #24B43D;
              background-color: rgba(155, 219, 213, 0.75);
            }
            .GykjMap-typhoon-legend-circle-10 {
              border: 1px solid #DCD024;
              background-color: rgba(244, 255, 151, 0.51);
            }
            .GykjMap-typhoon-legend-circle-12 {
              border: 1px solid #E72A1D;
              background-color: rgba(247, 179, 178, 0.64);
            }
          }
        }
      }
      .GykjMap-typhoon-legend-center {
        width: 100%;
        overflow: hidden;
        margin-top: 5px;
        color: white;
        .GykjMap-typhoon-legend-header {
          height: 30px;
          line-height: 30px;
          text-align: center;
        }
        .GykjMap-typhoon-legend-list {
          width: 100%;
          display: flex;
          text-align: center;
          padding: 10px 0;
          background-color: rgba(26, 54, 126, 0.8);
          .GykjMap-typhoon-legend-detail {
            flex: 1;
            &.GykjMap-typhoon-legend-detail-STS {
              flex: 0 0 60px;
            }
            &.GykjMap-typhoon-legend-detail-TY {
              flex: 0 0 40px;
            }
          }
        }
      }
      .GykjMap-typhoon-legend-prediction {
        width: 100%;
        overflow: hidden;
        margin-top: 5px;
        color: white;
        .GykjMap-typhoon-legend-header {
          height: 30px;
          line-height: 30px;
          text-align: center;
        }
        .GykjMap-typhoon-legend-list {
          width: 100%;
          display: flex;
          align-items: center;
          text-align: center;
          padding: 10px 0;
          background-color: rgba(26, 54, 126, 0.8);
          .GykjMap-typhoon-legend-detail {
            flex: 1;
            margin: 0 6px;
            &.GykjMap-typhoon-legend-detail-hk,
            &.GykjMap-typhoon-legend-detail-lms {
              flex: 0 0 50px;
            }
            .GykjMap-typhoon-legend-forecast {
              width: 30px;
              height: 3px;
              margin: 0 auto;
              margin-bottom: 6px;
              display: flex;
              align-content: center;
              justify-content: center;
              > div {
                flex: 1;
                margin: 0 2px;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
</style>
